import React, { Component } from "react";
import { Spin, Checkbox, Button, Input, Icon, message } from "antd";
import { connect } from "dva";
import renderDetailMessageDuration from './helper';
import styles from "./MessageDetail.less";
import FixedBottomWrapper from "../../../../components/FixedBottomWrapper";
// import { getChannelText } from "../../../channelType";

const { TextArea } = Input;

@connect(stores => ({
  detailData: stores.saveMessage,
  messageData: stores.systemManager
}))
class MessageDetail extends Component {
  state = { checked: ["1"], detailKey: {}, newLoading: false, advice: "" };

  componentDidMount() {
    this.setState({
      newLoading: true
    });
    setTimeout(() => {
      const { detailKey } = this.props.detailData;
      this.setState({
        detailKey
      });
      const { dispatch } = this.props;
      dispatch({
        type: "saveMessage/getDetail",
        payload: { msgSourceId: detailKey.specificEventId }
      }).then(() => {
        const { detailData } = this.props;
        const { detailMessage = {} } = detailData || {};
        if (detailKey.operate === "detail") {
          this.setState({
            checked: this.getstatus(
              detailMessage && detailMessage.auditStatus
                ? detailMessage.auditStatus
                : ""
            )
          });
          if (
            detailMessage &&
            detailMessage.auditStatus &&
            detailMessage.auditStatus === -1
          ) {
            this.setState({
              advice: detailMessage.auditDescribe
            });
          }
        }
        this.setState({
          newLoading: false
        });
      });
    }, 500);
  }

  getstatus = auditStatus => {
    if (auditStatus === 1) {
      return ["1"];
    }
    if (auditStatus === -1) {
      return ["-1"];
    }
    return [];
  };

  checkChange = e => {
    if (e && e.length === 2) {
      this.setState({
        checked: [e[1]]
      });
    } else {
      this.setState({
        checked: e
      });
    }
  };

  getChannelText = (text)=>{
    switch(text){
      case 4:
        return '短信';
      case 10:
        return '邮件';
      default: 
      return '';
    }
  }

  channelType = text => <span>{this.getChannelText(text)}</span>;

  getRule = (detailMessage = {}) => {
    if (
      detailMessage.resendChannelId &&
      detailMessage.resendChannelId === detailMessage.pushChannelId
    ) {
      return "消息分发失败同渠道重发一次";
    }
    if (
      detailMessage.resendChannelId &&
      detailMessage.resendChannelId !== detailMessage.pushChannelId &&
      detailMessage.resendChannelId !== ""
    ) {
      return `消息分发失败在${detailMessage.resendChannelName}渠道重发一次`;
    }
    return "---";
  };

  submit = () => {
    const { pendingEventId, specificEventId } = this.state.detailKey;
    const { checked, advice } = this.state;
    if (checked.length === 0) {
      message.error("请选择审核结果");
      return;
    }
    const { dispatch, history } = this.props;
    dispatch({
      type: "systemManager/auditMessage",
      payload: {
        pendingEventId,
        specificEventId,
        eventType: 2,
        stateHandle: checked[0],
        handleDescribe: advice
      }
    }).then(() => {
      const { messageData } = this.props;
      const { auditErrCode = -1 } = messageData;
      if (auditErrCode === 0) {
        message.success("审核成功");
        history.goBack(-1);
      } else {
        message.error("审核失败");
      }
    });
  };

  adviceGet = e => {
    this.setState({
      advice: e.target.value
    });
  };

  getControl = (detailMessage = {}) => {
    if (detailMessage.flowControlTimeUnit === 1) {
      return "分钟";
    }
    if (detailMessage.flowControlTimeUnit === 2) {
      return "小时";
    }
    if (detailMessage.flowControlTimeUnit === 3) {
      return "天";
    }
    return "---";
  };

  render() {
    const { detailKey } = this.state;
    const { history, detailData = {} } = this.props;
    const { loading } = detailData || {};
    let { detailMessage } = detailData || {};
    detailMessage = detailMessage || {};
    const { operate = "audit" } = detailKey;
    return (
      <FixedBottomWrapper
        className={styles.root}
        footer={
          operate === "detail" ? null : (
            <div
              style={{
                display: "flex",
                justifyContent: "center"
              }}
            >
              <div>
                <Button
                  type="primary"
                  style={{ marginRight: 8, marginLeft: 20 }}
                  onClick={this.submit}
                >
                  确定
                </Button>
                <Button
                  onClick={() => {
                    history.goBack(-1);
                  }}
                >
                  取消
                </Button>
              </div>
            </div>
          )
        }
      >
        <Spin spinning={this.state.newLoading || loading}>
          <div className={styles.topInfo}>
            {operate === "detail" ? (
              <div style={{ display: "flex", justifyContent: "space-between" }}>
                <span className={styles.title}>基本信息</span>
                <Icon
                  type="close"
                  style={{ color: "rgba(0,0,0,0.45)", fontSize: 16 }}
                  onClick={() => {
                    history.goBack(-1);
                  }}
                />
              </div>
            ) : (
              <span className={styles.title}>基本信息</span>
            )}
            <div style={{ display: "flex" }}>
              <div style={{ width: "50%" }}>
                <div style={{ marginBottom: 16, color: "rgba(0,0,0,0.85)" }}>
                  消息源名称：
                  <span style={{ color: "rgba(0,0,0,0.65)" }}>
                    {detailMessage && detailMessage.sourceName
                      ? detailMessage.sourceName
                      : "---"}
                  </span>
                </div>
                <div style={{ marginBottom: 16, color: "rgba(0,0,0,0.85)" }}>
                  渠道类型：
                  <span style={{ color: "rgba(0,0,0,0.65)" }}>
                    {detailMessage && detailMessage.pushChannelType
                      ? this.channelType(detailMessage.pushChannelType)
                      : "--"}
                  </span>
                </div>
                <div style={{ marginBottom: 16, color: "rgba(0,0,0,0.85)" }}>
                  渠道名称：
                  <span style={{ color: "rgba(0,0,0,0.65)" }}>
                    {detailMessage && detailMessage.pushChannelName
                      ? detailMessage.pushChannelName
                      : "---"}
                  </span>
                </div>
                <div style={{ marginBottom: 16, color: "rgba(0,0,0,0.85)" }}>
                  消息类型：
                  <span style={{ color: "rgba(0,0,0,0.65)" }}>
                    {detailMessage && detailMessage.messageTypeName
                      ? detailMessage.messageTypeName
                      : "---"}
                  </span>
                </div>
              </div>
              <div style={{ width: "50%" }}>
                <div style={{ marginBottom: 16, color: "rgba(0,0,0,0.85)" }}>
                  消息源ID：
                  <span style={{ color: "rgba(0,0,0,0.65)" }}>
                    {detailMessage && detailMessage.sourceId
                      ? detailMessage.sourceId
                      : "---"}
                  </span>
                </div>
                <div style={{ marginBottom: 16, color: "rgba(0,0,0,0.85)" }}>
                  管理员：
                  <span style={{ color: "rgba(0,0,0,0.65)" }}>
                    {detailMessage &&
                    detailMessage.owner &&
                    JSON.parse(detailMessage.owner)
                      ? JSON.parse(detailMessage.owner)[0].name
                      : "---"}
                  </span>
                </div>
                <div style={{ marginBottom: 16, color: "rgba(0,0,0,0.85)" }}>
                  归属部门：
                  <span style={{ color: "rgba(0,0,0,0.65)" }}>
                    {detailMessage && detailMessage.ownerDeptName
                      ? detailMessage.ownerDeptName
                      : "---"}
                  </span>
                </div>
                <div style={{ color: "rgba(0,0,0,0.85)" }}>
                  消息模板：
                  <span style={{ color: "rgba(0,0,0,0.65)" }}>
                    {detailMessage && detailMessage.templateName
                      ? detailMessage.templateName
                      : "---"}
                  </span>
                </div>
              </div>
            </div>
            <div style={{ display: "flex", color: "rgba(0,0,0,0.85)" }}>
              消息源描述：
              <span
                style={{
                  color: "rgba(0,0,0,0.65)",
                  width: "calc(100% - 120px)",
                  display: "block"
                }}
              >
                {detailMessage && detailMessage.sourceDescription
                  ? detailMessage.sourceDescription
                  : "---"}
              </span>
            </div>
          </div>
          <div className={styles.middleInfo}>
            <span className={styles.title}>策略配置</span>
            <div style={{ display: "flex" }}>
              <div style={{ width: "50%" }}>
                {/* <div style={{ marginBottom: 16, color: "rgba(0,0,0,0.65)" }}>
                  重发规则：
                  <span style={{ color: "rgba(0,0,0,0.85)" }}>
                    {this.getRule(detailMessage || {})}
                  </span>
                </div> */}
                <div style={{ marginBottom: 16, color: "rgba(0,0,0,0.65)" }}>
                  消息源有效期：
                  <span style={{ color: "rgba(0,0,0,0.85)" }}>
                    {detailMessage && detailMessage.startTime
                      ? renderDetailMessageDuration(detailMessage)
                      : `---`}
                  </span>
                </div>
              </div>
              <div style={{ width: "50%" }}>
                <div style={{ marginBottom: 16, marginLeft: 14 }}>
                  流量控制：
                  <span style={{ color: "rgba(0,0,0,0.85)" }}>
                    限制单位{this.getControl(detailMessage || {})}
                    ；API最大调用次数
                    {detailMessage.flowControlCountLimit &&
                    detailMessage.flowControlCountLimit !== ""
                      ? detailMessage.flowControlCountLimit
                      : "---"}
                  </span>
                </div>
              </div>
            </div>
          </div>
          <div style={{ paddingTop: 16, paddingBottom: 24 }}>
            <span className={styles.title}>审批信息</span>
            <div style={{ color: "rgba(0,0,0,0.85)" }}>
              审批结果：
              <Checkbox.Group
                value={this.state.checked}
                onChange={this.checkChange}
                disabled={operate === "detail"}
              >
                <Checkbox value="1">通过</Checkbox>
                <Checkbox value="-1">不通过</Checkbox>
              </Checkbox.Group>
            </div>
            {this.state.checked.length > 0 && this.state.checked[0] === "-1" ? (
              <div className={styles.advice}>
                <div style={{ marginTop: 4, width: 70 }}>审批意见：</div>
                <TextArea
                  style={{ width: "calc(100% - 70px)", height: 56 }}
                  disabled={operate === "detail"}
                  onChange={this.adviceGet}
                  value={this.state.advice}
                  maxLength={50}
                />
              </div>
            ) : null}
          </div>
        </Spin>
      </FixedBottomWrapper>
    );
  }
}

export default MessageDetail;
